<template>
	<div class="pickup-code-main">
		<!--提货码-->
		<div class="pickcode fix">
			<div class="pickcode_span fl">提货码：</div>
			<div class="pickcode_code fl">{{pickCode}}</div>
			<div class="pickcode_unused fr">待使用</div>
		</div>
		<!--提货码-->
		<div class="pickcode fix">
			<div class="pickcode_span fl">提货码：</div>
			<div class="pickcode_code loseefficacy fl">{{pickCode}}</div>
			<div class="pickcode_loseefficacy fr">已失效</div>
		</div>
		<!--提货码-->
		<div class="pickcode fix">
			<div class="pickcode_span fl">提货码：</div>
			<div class="pickcode_code used fl">{{pickCode}}</div>
			<div class="pickcode_used fr">已使用</div>
		</div>
		<!--提货方法-->
		<ul class="pickway">
			<li class="fix">
				<div class="pickway_name fl">预约时间:</div>
				<div class="pickway_cont fl">{{pickWayTime}}</div>
			</li>
			<li class="fix">
				<div class="pickway_name fl">门店名称:</div>
				<div class="pickway_cont fl">{{pickWayName}}</div>
			</li>
			<li class="fix">
				<div class="pickway_name fl">门店地址:</div>
				<div class="pickway_cont fl">{{pickWayAddress}}</div>
				<router-link to="/"><img class="pickway_map fr" src="../assets/image/ico_map@2x.png"></router-link>
			</li>
			<li class="fix">
				<div class="pickway_name fl">使用期限:</div>
				<div class="pickway_cont fl">{{pickWayTimes}}</div>
			</li>
			<li class="fix">
				<div class="pickway_name fl">门店电话:</div>
				<div class="pickway_cont fl">{{pickWayPhone}}</div>
				<a :href="'tel:'+pickWayPhone"><img class="pickway_phone fr" src="../assets/image/ico_phone@2x.png"></a>
			</li>
		</ul>
		<!--订单信息-->
		<div class="orderinformation fix">
			<div class="orderinformation_name fl">订单信息</div>
			<router-link to="/" class="fr"><img class="orderinformation_arrow" src="../assets/image/ico_arrows@2x.png"></router-link>
			<div class="orderinformation_price fr">￥{{actualPayment}}</div>
			<div class="orderinformation_span fr">总价：</div>
		</div>
		<!--使用说明-->
		<div class="use">
			<div class="use_title">使用说明</div>
			<div class="use_littletitle">① 提货地址及方式</div>
			<div class="use_describe">请您到下单时选择的门店提取所购买的商品，您可以在本卡卷页面查看到该地址，提货时请向导购员出示此提货码。</div>
			<div class="use_littletitle">② 提货时间</div>
			<div class="use_describe">未来保障门店的周转率，请您在该提货码的使用期限内完成提货，提货码过期后订单会自动退款给您 ，如果有任何问题，您可以先电话联系商家进行咨询。</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'

export default {
	name: 'app',
	data () {
		return {
			pickCode:"8814 2344 7",
			pickWayTime:"2017年7月6日  星期六  11:00-17:00",
			pickWayName:"乐町（南山海岸城店）",
			pickWayAddress:"广东省 深圳市 南山区 海岸城 广东省 深圳市 南山区 海岸城",
			pickWayTimes:"2017.07.15 - 2017.07.30",
			pickWayPhone:"0755-1233211",
			actualPayment:65.00,
		}
	},
	methods () {
	}
}
</script>
<style lang="scss">
.pickup-code-main{
  .pickcode{ margin-bottom: 0.2rem;  width: 100%; height: 1.2rem; line-height: 1.2rem; background: #fff; }
  .pickcode_span{ padding-left: 0.3rem; height: 1.2rem; font-size: 0.24rem; color: #353535; }
  .pickcode_code{ padding-left: 0.6rem; height: 1.2rem; font-size: 0.4rem; color: #ff365d; }
  .pickcode_unused{ margin: 0.4rem 1.56rem 0 0; width: 0.98rem; height: 0.34rem; line-height: 0.34rem; text-align: center; font-size: 0.24rem; color: #ff365d; border: 1px solid #ff365d; border-radius: 0.04rem; }
  .loseefficacy{ color: #666; text-decoration: line-through; }
  .pickcode_loseefficacy{ margin: 0.4rem 1.56rem 0 0; width: 0.98rem; height: 0.34rem; line-height: 0.34rem; text-align: center; font-size: 0.24rem; color: #666; border: 1px solid #666; border-radius: 0.04rem; }
  .used{ color: #666; }
  .pickcode_used{ margin: 0.4rem 1.56rem 0 0; width: 0.98rem; height: 0.34rem; line-height: 0.34rem; text-align: center; font-size: 0.24rem; color: #666; border: 1px solid #666; border-radius: 0.04rem; }
  .pickway{
    padding: 0 0.3rem; background: #fff;
    li{
      width: 100%;
      +li{ border-top: 1px solid #ddd; }
    }
  }
  .pickway_name{ width: 1.36rem; height: 0.8rem; line-height: 0.8rem; font-size: 0.24rem; color: #353535; }
  .pickway_cont{ padding: 0.18rem 0 0.14rem; width: 4.8rem; line-height: 0.46rem; font-size: 0.24rem; color: #333; }
  .pickway_map{ display: block; margin-top: 0.48rem; width: 0.28rem; height: 0.28rem; }
  .pickway_phone{ display: block; margin-top: 0.28rem; width: 0.28rem; height: 0.28rem; }
  .orderinformation{ margin-top: 0.2rem; padding: 0 0.3rem; height: 0.88rem; line-height: 0.88rem; background: #fff; border-bottom: 0.06rem solid #f4f5f5; }
  .orderinformation_name{ font-size: 0.24rem; color: #333; }
  .orderinformation_arrow{ display: block; padding: 0.32rem 0 0 0.3rem; width: 0.14rem; height: 0.24rem; }
  .orderinformation_price{ font-size: 0.32rem; color: #ff365d; }
  .orderinformation_span{ font-size: 0.24rem; color: #333; }
  .use{ padding: 0.3rem; background: #fff; border-top: 0.2rem solid #f4f5f5; border-bottom: 0.06rem solid #f4f5f5; }
  .use_title{ height: 0.24rem; line-height: 0.24rem; font-size: 0.24rem; color: #333; }
  .use_littletitle{ padding-top: 0.26rem; line-height: 0.24rem; font-size: 0.24rem; color: #666; }
  .use_describe{ padding-top: 0.16rem; line-height: 0.32rem; font-size: 0.24rem; color: #999; }
}
</style>
